
import React, { Component } from 'react';
import { message, Alert, Button, Modal, Table, Anchor } from 'antd';
import TextLoop from 'react-text-loop';
import './order.scss';

const {Link} = Anchor;

const userInfo = {
    name: 'aha',
    note: '这是一个备注'
}

let arr = [1, 2, 3, 4, 5, 6]


export default class Order extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                userName: '',
                userTel: ''
            },
            visible: false,
            colums: [
                {
                    title: '表格1',
                    dataIndex: 'name',
                    key: 'name'
                },
                {
                    title: '表格2',
                    dataIndex: 'age',
                    key: 'age'
                },
                {
                    title: '表格3',
                    dataIndex: 'address',
                    key: 'address'
                },
            ],
            tableData: [
                {
                    name: '123',
                    age: 12,
                    address: '地址1',
                    key: 1
                },
                {
                    name: '234',
                    age: 13,
                    address: '地址2',
                    key: 2
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 3
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 4
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 5
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 6
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 7
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 8
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 9
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 10
                },
                {
                    name: '345',
                    age: 14,
                    address: '地址3',
                    key: 11
                },
            ]
        };
    }

    _msg = (value) => {
        message.info('您好啊')
    }

    // 钩子函数
    // componentWillMount() {
    //     // this._msg()
    // }

    render() {
        return (
            <div className="order_box">

                <Anchor>
                    <Link href="#id1" title="id1废话大奖啊" />
                    <Link href="#id2" title="id2范德萨发" />
                    <Link href="#id3" title="id3发达" />
                    <Link href="#id4" title="id4交换空间" />
                </Anchor>

                <Button type="primary" onClick={() => { this._showMoal() }}>点击</Button>

                <Alert variant="success" message="提示" description={this._username(userInfo)}></Alert>
                <Alert banner message={
                    <TextLoop mask>
                        {
                            arr.map((item) => {
                                return (
                                    <div key={item}>这是滚动提示{item}</div>
                                )
                            })
                        }
                    </TextLoop>
                }></Alert>

                <Modal
                    visible={this.state.visible}
                    title={'title'}
                    onOk={() => { this._showMoal() }}
                    onCancel={() => { this._showMoal() }}
                >
                    <Table className="table_box" scroll={{ x: true, y: 200 }} size="small" tableLayout="fixed" columns={this.state.colums} dataSource={this.state.tableData}></Table>
                </Modal>

                <div className="test_1" id="id1">id1</div>
                <div className="test_1" id="id2">id2</div>
                <div className="test_1" id="id3">id3</div>
                <div className="test_1" id="id4">id4</div>
                <div className="test_1" id="id5">id5</div>

            </div>
        )
    }

    _showMoal = () => {
        let show = this.state.visible
        this.setState({
            visible: !show
        })
    }

    _username = (info) => {
        return info.name + info.note
    }

    _sendInfo() {
        let userName = document.getElementsByClassName('user_name')[0]
        let userTel = document.getElementsByClassName('user_tel')[0]
        this.setState(
            {
                form: {
                    userName: userName.value,
                    userTel: userTel.value
                }
            })
    }
}
